<template>
	<view class="house">
		<view class="">
			<!-- 2.0.19支持autoBack，默认为false -->
			<u-navbar leftText="房屋绑定" :autoBack="true">
			</u-navbar>
		</view>
		<view class="con-body" style="padding-left: 20rpx; padding-right: 20rpx; background-color: #FEFEFE;">
			<!-- 访客通行 -->
			<view class="uni-flex-center">
				<view class="main-service uni-cell-90">
					<view class="user-list">
						<view style="padding-left: 30rpx; padding-right: 30rpx;">
							<u-form labelPosition="left" :model="model1" :rules="rules" ref="form1">
								<u-form-item label="绑定房屋" @click="floor" prop="userInfo.floor" labelWidth="70"
									borderBottom ref="item1">
									<u-input disabled v-model="model1.userInfo.home" placeholder="请绑定房屋" border="none"
										disabledColor="#FFFFFF" style="background-color: #FFFFFF;">
									</u-input>
									<u-icon slot="right" name="close-circle" @click="clear"></u-icon>
								</u-form-item>


								<u-form-item label="您的姓名" prop="userInfo.name" labelWidth="70" borderBottom>
									<u-input v-model="model1.userInfo.name" placeholder="请填写您的姓名" border="none"
										style="background-color: #FFFFFF;"></u-input>
								</u-form-item>
								<u-form-item label="您的身份" prop="userInfo.type" labelWidth="70" borderBottom>
									<u-radio-group v-model="model1.userInfo.type" placement="row" @change="groupChange">
										<u-radio :customStyle="{marginLeft: '15rpx'}"
											v-for="(item, index) in identityList" :key="index" :label="item.label"
											:name="item.name" activeColor="#008987" @change="radioChange">
										</u-radio>
									</u-radio-group>
								</u-form-item>
							</u-form>
						</view>
					</view>
				</view>
				<u-picker :show="showFloor" :columns="actionsFloor" title="请选择您的小区" keyName="name" :maskCloseAble="true" confirm-color="#008987" @cancel="showFloor = false"
					@confirm="floorSelect">
				</u-picker>
				<u-picker :show="showFloor1" :columns="actionsFloor" title="请选择您的楼号" keyName="name" :mask-close-able="true" confirm-color="#008987" @cancel="showFloor1 = false"
					@confirm="floorSelect">
				</u-picker>
				<u-picker :show="showFloor2" :columns="actionsFloor" title="请选择您的单元" keyName="name" :mask-close-able="true" confirm-color="#008987" @cancel="showFloor2 = false"
					@confirm="floorSelect">
				</u-picker>
				<u-picker :show="showFloor3" :columns="actionsFloor" title="请选择您的房屋" keyName="name" :mask-close-able="true" confirm-color="#008987" @cancel="showFloor3 = false" @confirm="floorSelect">
				</u-picker>
			</view>
		</view>
		<u-toast ref="uToast"></u-toast>
		<u-button :customStyle="btnStyle" @click="submit">提交审核</u-button>
	</view>
</template>

<script>
	import {
		editHouse
	} from "@/service/userService.js";
	import {
		getHouse
	} from "@/service/configService.js";
	export default {
		data() {
			return {
				btnStyle: {
					width: '96%',
					borderRadius: '40rpx',
					marginLeft: '2%',
					backgroundImage: "url('https://resourse.cnlhjt.com/upload/20220825/d1aa35c1d129137d9b12c8f34e59c5bc.png')",
					backgroundSize: '100% 80rpx',
					color: '#FFFFFF',
					position: 'fixed',
					bottom: '40rpx'
				},
				model1: {
					userInfo: {
						home: '',
						name: '',
						village: 0,
						unit: 0,
						floor: 0,
						house: 0,
						type: 1
					},
				},
				identityList: [{
						name: 0,
						label: '业主',
						disabled: false
					},
					{
						name: 1,
						label: '家人',
						disabled: false
					},
					{
						name: 2,
						label: '租客',
						disabled: false
					}
				],
				rules: {

				},
				num: 0,
				showFloor: false,

				showFloor1: false,

				showFloor2: false,

				showFloor3: false,
				actionsFloor: [],
				nid: 0,
				
				columns:[]
			}
		},
		methods: {
			groupChange(n) {
				this.model1.userInfo.type = n;
			},
			radioChange(n) {
				this.model1.userInfo.type = n;
			},
			clear() {
				this.num = 0;
				this.nid = 0;
				this.model1.userInfo.home = '';
			},
			floor() {
				if (this.num > 3) {
					return;
				} else if (this.num == 0) {
					this.showFloor = true;
				}

				getHouse({
					nid: this.nid
				}).then(this.floorRes)
			},
			floorRes(e) {
				// console.log(e);
				if (e.code == 200) {
					this.actionsFloor=[e.result];
						
				} else {
					this.actionsFloor = [];
					this.showFloor1 = false;
					this.showFloor2 = false;
					this.showFloor3 = false;
				}
			},
			floorSelect(e) {
				// console.log(e);
				this.num++;
				this.nid = e.value[0].id;
				this.floor();
				if (this.num == 1) {
					this.model1.userInfo.village = e.value[0].id;
					this.showFloor = false;
					this.showFloor1 = true;
				} else if (this.num == 2) {
					this.model1.userInfo.unit = e.value[0].id;
					this.showFloor1 = false;
					this.showFloor2 = true;
				} else if (this.num == 3) {
					this.model1.userInfo.floor = e.value[0].id;
					this.showFloor2 = false;
					this.showFloor3 = true;
				} else {
					this.model1.userInfo.house = e.value[0].id;
					this.showFloor3 = false;
				}
				this.model1.userInfo.home = this.model1.userInfo.home + e.value[0].name;
			},
			confirm(e){
				// console.log(e);
				this.showFloor3=false;
				this.model1.userInfo.house = e.value[0].id;
				this.model1.userInfo.home = this.model1.userInfo.home + e.value[0].name;
			},
			submit() {
				// console.log(this.model1.userInfo);
				let par = this.model1.userInfo;
				editHouse(par).then(res => {
					if (res.code == 200) {
						this.$refs.uToast.show({
							type: 'success',
							title: '提交成功',
							icon:false
						})
						setTimeout(function(){
							uni.navigateBack();
						},1000)
					} else {
						this.$refs.uToast.show({
							type: 'error',
							title: res.msg,
							icon:false
						})
					}
				})
			}
		}
	}
</script>

<style>
</style>
